<template>
  <el-menu background-color="#304156" :default-active="$route.path!='/'?$route.path:'/dashboard'" router :default-openeds="openeds" text-color="rgb(191, 203, 217)" active-text-color="rgb(64, 158, 255)">
    <el-menu-item index="/dashboard">
      <i class="el-icon-menu"></i>
      <span slot="title">Dashboard</span>
    </el-menu-item>
    <el-submenu index="1">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>JQuery</span>
      </template>
      <el-menu-item-group class="main-aside-groud">
        <el-menu-item index="/jquery/one">JQ一级菜单 </el-menu-item>
        <el-menu-item index="/jquery/two">JQ二级菜单</el-menu-item>
        <el-menu-item index="/jquery/three">JQ三级级菜单</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="2">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>javaScript</span>
      </template>
      <el-menu-item-group class="main-aside-groud">
        <el-menu-item index="/javaScript/one">JS一级菜单 </el-menu-item>
        <el-menu-item index="/javaScript/two">JS二级菜单</el-menu-item>
        <el-menu-item index="/javaScript/three">JS三级级菜单</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-submenu index="3">
      <template slot="title">
        <i class="el-icon-location"></i>
        <span>笔记</span>
      </template>
      <el-menu-item-group class="main-aside-groud">
        <el-menu-item index="/note/addNoteClassify">添加笔记分类 </el-menu-item>
        <el-menu-item index="/note/addNote">添加笔记</el-menu-item>
      </el-menu-item-group>
    </el-submenu>
    <el-menu-item index="/test">
      <i class="el-icon-menu"></i>
      <span slot="title">测试功能</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  //import引入的组件
  components: {},
  //子组件引用父组件:data=data 方法@search=search使用this.emit('search', '参数');
  props: [],
  data () {
    return {
      openeds: []//默认打开哪个下拉
    };
  },
  methods: {},
  mounted () {
  },
};
</script>

<style>
.main-aside-groud ul li {
  background: #1f2d3d !important;
}
.main-aside-groud ul li:hover {
  background: #001528 !important;
}
.main-aside-groud .el-menu-item-group__title {
  height: 0;
  padding: 0;
}
</style>